<template>
  <div class="page">

    <!-- 统计卡片 -->
    <div class="stat-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-title">问卷总数</div>
        <div class="stat-value">{{ stat.total }}</div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-title">已发布</div>
        <div class="stat-value">{{ stat.published }}</div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-title">未发布</div>
        <div class="stat-value">{{ stat.unpublished }}</div>
      </el-card>

      <el-card class="stat-card" shadow="hover">
        <div class="stat-title">本月新增</div>
        <div class="stat-value">{{ stat.monthNew }}</div>
      </el-card>
    </div>

    <!-- 卡片容器 -->
    <el-card class="card-pro">

      <!-- 顶部标题区域 -->
      <template #header>
        <div class="header-bar-pro">
          <div class="title-area">
            <div class="page-title">问卷管理</div>
            <div class="sub-title">管理、发布与分析您的问卷</div>
          </div>

          <div class="actions">
            <el-button type="primary" @click="openAddDialog" class="btn-pro">
              <el-icon>
                <Plus />
              </el-icon> 新建问卷
            </el-button>

            <el-button type="info" @click="openEditDialog" class="btn-pro">
              <el-icon>
                <Edit />
              </el-icon> 编辑问卷
            </el-button>
          </div>
        </div>

        <!-- 搜索栏 -->
        <div class="search-bar-pro">
          <!-- 第一行 -->
          <div class="search-row">
            <el-input v-model="searchTitle" placeholder="标题" clearable class="search-item" />
            <el-select v-model="searchStatus" placeholder="发布状态" clearable class="search-item">
              <el-option label="未发布" value="0" />
              <el-option label="已发布" value="1" />
            </el-select>
          </div>

          <!-- 第二行 -->
          <div class="search-row">
            <el-date-picker v-model="searchCreateRange" type="daterange" start-placeholder="创建开始" end-placeholder="创建结束"
              class="search-item" />
            <el-date-picker v-model="searchQuestionnaireRange" type="daterange" start-placeholder="问卷开始"
              end-placeholder="问卷结束" class="search-item" />
            <div class="search-buttons">
              <el-button type="primary" @click="getList" class="search-btn">搜索</el-button>
              <el-button @click="resetSearch" class="search-btn reset">重置</el-button>
            </div>
          </div>
        </div>



      </template>

      <!-- 表格 -->
      <el-table :data="list" border class="table-pro" @selection-change="handleSelectionChange" stripe
        style="margin-top: 12px">
        <el-table-column type="selection" width="50" fixed />

        <el-table-column prop="title" label="标题" min-width="180" />
        <el-table-column prop="startTime" label="开始时间" width="140" />
        <el-table-column prop="endTime" label="结束时间" width="140" />
        <el-table-column prop="createTime" label="创建时间" width="140" />

        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === '0' ? 'info' : 'success'">
              {{ scope.row.status === '0' ? '未发布' : '已发布' }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="300" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="goDesign(scope.row)">设计</el-button>
            <el-button link type="success" @click="handlePublish(scope.row)">发布</el-button>
            <el-button link type="warning" @click="handlePreview(scope.row)">预览</el-button>
            <el-button link type="info" @click="goAnalysis(scope.row)">分析</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <div class="pagination-pro">
        <el-pagination background layout="total, prev, pager, next, jumper" :total="total"
          v-model:current-page="pageNum" v-model:page-size="pageSize" @current-change="getList"
          @size-change="getList" />
      </div>

    </el-card>

    <!-- 弹窗 -->
    <QuestionnaireForm v-model="dialogVisible" :isEdit="isEdit" :editData="currentData" @success="handleSuccess" />

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import QuestionnaireForm from '@/pages/questionnaire/QuestionnaireForm.vue'

/** 统计卡片数据 */
const stat = ref({
  total: 0,
  published: 0,
  unpublished: 0,
  monthNew: 0
})

/** 获取统计数据 */
const getStat = async () => {
  const res = await request.get('/questionnaire/questionnaireStat')
  stat.value = res.data.data || {}
}

/** 表格与搜索相关 */
const selectedRow = ref(null)
const searchTitle = ref('')
const searchCreateRange = ref([])
const searchQuestionnaireRange = ref([])
const searchStatus = ref('')

const router = useRouter()
const list = ref([])
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)

/** 弹窗 */
const dialogVisible = ref(false)
const isEdit = ref(false)
const currentData = ref({})

const handleSelectionChange = rows => { selectedRow.value = rows.length ? rows[0] : null }

/** 获取列表 */
const getList = async () => {
  const params = {
      page: pageNum.value,
      size: pageSize.value,
      title: searchTitle.value,
      createTimeStart: searchCreateRange.value[0],
      createTimeEnd: searchCreateRange.value[1],
      startTime: searchQuestionnaireRange.value[0],
      endTime: searchQuestionnaireRange.value[1],
      status: searchStatus.value
    }
  const res = await request.get('/questionnaire/listQuestionnaire', {params})
  list.value = res.data.data.records || []
  total.value = res.data.data.total || 0
}

// 重置搜索
const resetSearch = () => {
  searchTitle.value = ''
  searchCreateRange.value = []
  searchQuestionnaireRange.value = []
  searchStatus.value = ''
  getList()
}

/** 编辑、新建 */
const openAddDialog = () => { dialogVisible.value = true; isEdit.value = false; currentData.value = {} }
const openEditDialog = () => {
  if (!selectedRow.value) return ElMessage.warning('请先选择一条问卷进行编辑')
  if (selectedRow.value.status === '1') return ElMessage.warning('已发布的问卷不能编辑')
  currentData.value = { ...selectedRow.value }
  isEdit.value = true
  dialogVisible.value = true
}

const handleSuccess = () => getList()

/** 操作按钮 */
const handlePreview = row => { 
  router.push({ path: `/HomePage/QuestionnairePreview/${row.id}`, query: { title: row.title, description: row.description } }) 
}
const handlePublish = row => { 
  router.push({ path: row.status === '1' ? `/HomePage/GenerateQA/${row.id}` : `/HomePage/QuestionnairePublish/${row.id}`, query: { ...row } }) 
}
const goDesign = row => { 
  if (row.status === '1') return ElMessage.warning('已发布问卷不可再设计'); 
  router.push({ path: `/HomePage/QuestionnaireEditor/${row.id}`, query: { title: row.title, description: row.description } }) 
}
const goAnalysis = row => { 
  router.push({ path: `/HomePage/QuestionnaireAnalysis/${row.id}`, query: { title: row.title, description: row.description } }) 
}

/** 生命周期 */
onMounted(() => {
  getStat()
  getList()
})
</script>

<style scoped>
.page {
  padding: 4px;
  height: 100%;
  /* overflow: visible; */
}

/* 统计卡片容器 */
.stat-cards {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  
}

/* 单个卡片 */
.stat-card {
  flex: 1;
  padding: 26px 20px;
  border-radius: 18px;

  /* 半透明玻璃感 */
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);

  box-shadow: 0 8px 8px rgba(71, 71, 71, 0.12);
  transition: all 0.5s ease, background 0.5s ease-out; /* 过渡动画 */

  cursor: pointer;
}

/* 悬停效果：渐变 + 上浮 + 阴影增强 */
.stat-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0,0,0,0.20);

  /* 悬浮渐变色背景 */
  background: linear-gradient(135deg, #f4fcff 0%, #ffffff 100%);
  border-color: rgba(255, 255, 255, 0.5);

  /* 保持玻璃感 */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  color: #fff; /* 可选，文字变白更好看 */
}


/* 标题文字 */
.stat-title {
  font-size: 15px;
  color: #4a5568;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

/* 数字 */
.stat-value {
  font-size: 34px;
  font-weight: 700;
  color: #2d3748;
  text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}



.card-pro {
  border-radius: 16px;
  padding: 4px 20px 22px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.06);
  border: 1px solid #e8e8e8;
}

.header-bar-pro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 12px;
  border-radius: 12px;
  border: 1px solid #ebeef5;
  background: linear-gradient(
    135deg,
    #f5f9ff 0%,
    #eef3ff 40%,
    #e9f7ff 100%
  );
  backdrop-filter: blur(6px); /* 轻微磨砂风，更像 Pro */
}

.page-title {
  font-size: 22px;
  font-weight: 700;
  color: #2c3e50;
}

.sub-title {
  font-size: 13px;
  color: #909399;
  margin-top: 3px;
}

.actions {
  display: flex;
  gap: 12px;
}

.btn-pro {
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 14px;
}

.search-bar-pro {
  display: flex;
  flex-direction: column; /* 多行布局 */
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border: 1px solid #ebeef5;
}

.search-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap; /* 窄屏自动换行 */
  align-items: center;
}

.search-item {
  flex: 1; /* 每个控件占据可用空间 */
  min-width: 160px; /* 保证控件最小宽度 */
}

.search-buttons {
  display: flex;
  gap: 12px;
}

.search-btn {
  height: 38px;
}

.search-btn.reset {
  background: #f5f7fa;
  color: #606266;
}


.table-pro {
  margin-top: 14px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.el-table th, .el-table td {
  padding: 12px 8px;
  font-size: 14px;
}

.pagination-pro {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
}
</style>
